<template>
    <div class="contain">
        <div class="header">
            <el-button type="primary" @click="addCard()">添加人员</el-button>
            <span class="export-span" v-if = "multipleSelection.length != 0">
                <form :action="url" method="get" >
                     <button class="export" type="submit">批量导出</button>
                     <input type="hidden" name="ids" :value="multipleSelection" />
                     <input type="hidden" name="sessionId" :value="sessionId" />
                </form>
            </span>
            <span  class="export-span" v-else>
                <button class="export" type="submit" @click="check">批量导出</button>
                <input type="hidden" name="ids" :value="multipleSelection" />
            </span> 
            <el-button type="primary" @click="()=>{this.dialogVisible = true}">批量导入</el-button>
        </div>
        <div class="input_modal">         
            <div class="input-item">
                <span>请输入姓名：</span>
                <el-input v-model="staffName" placeholder="请输入关键字" class="proName"  @keyup.enter.native="search"></el-input>  
            </div>
            <div class="input-item">
                <el-button type="primary" @click="getinformList">查询</el-button>
            </div>
            
        </div>
        <div class="table-content">
            <el-table v-loading="loading"  @selection-change="selectTable" :data="informList"  style="width: 100%;text-align:center"   :border='true' >
                <el-table-column  fixed="left" 
                    type="selection" min-width='100' align="center">
                </el-table-column>
                <el-table-column  prop="" label="头像">
                    <template slot-scope="scope">
                        <div class="pic"><img :src="scope.row.imageUrl " style="width:60px;height:60px;border-radius:50%;" alt=""></div>
                    </template>
                </el-table-column>
                 <el-table-column prop="workCard" :formatter="formatter" label="工牌"></el-table-column>
                <el-table-column prop="staffName" :formatter="formatter" label="姓名"></el-table-column>
                <el-table-column prop="groupName" :formatter="formatter" label="项目组别"></el-table-column>
                <el-table-column prop="levelName" :formatter="formatter" label="等级"></el-table-column>
                <el-table-column prop="projectName" :formatter="formatter" label="负责项目"></el-table-column>
                <el-table-column prop="projectRole" :formatter="formatter" label="项目角色"></el-table-column>
                <el-table-column prop="projectPhase" :formatter="formatter" label="项目阶段"></el-table-column>
                <el-table-column  prop="isTop" width='250px' :formatter="formatter" label="负责部件及状态" >
                    <template slot-scope="scope">
                       <div class="box box-pack-center">
                           <div class="part-item" style="border-right:1px solid #ddd;" v-for="(item,index) in scope.row.taskDTOS" :key="index">
                               <div>{{item.partsName}}</div>
                               <div>{{item.partsStatusName}}</div>
                           </div>
                       </div>
                    </template> 
                  </el-table-column>
                  <el-table-column  prop="isTop" :formatter="formatter" label="最新空闲时段" >
                    <template slot-scope="scope">
                       从{{scope.row.startTime.split(' ')[0]}}之后
                    </template> 
                  </el-table-column>
                <el-table-column  prop="id"  label="操作" fixed="right" width='160px'>
                    <template slot-scope="scope">
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="addCard1(scope.row.id)">查看</el-button>
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="addCard(scope.row.id)">编辑</el-button>
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
                        <!-- <span v-if="tableData[scope.$index].status == 'VERIFIED'">已核实</span> -->
                    </template> 
                  </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="批量导入"
                :visible.sync="dialogVisible" :before-close="handleClose"
                size="tiny">
            <div class="upload-export">
                <div>注意事项</div>
                <ul>
                    <li>1.导入的数据文件必须为可识别的Excel文件，后缀名为.xls，且文件大小不多于2M。</li>
                    <li>2.不可导入已有的信息。</li>
                    <li>3.Excel表字段格式必须和后台字段保持一致。</li>
                </ul>
                <el-form label-width="150px">
                    <el-form-item label="文件：" >
                        <el-upload
                        :file-list="fileList"
                            class="files-upload"
                            ref="upload" accept=".xls,.xlsx"
                            :action="importUrl" name="file" :limit="1" 
                            :auto-upload="false" :on-exceed="handExceed" :on-success="handUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过10Mb&nbsp;&nbsp;<a href="https://file.icebartech.com/icebartech-roe/135.xlsx" download="员工信息导入模板.xlsx" >点此下载导入模板</a></div>
                            <div slot="tip" class="el-upload__tip" style="color:#fc0000;">注：上传资料内容的格式，请严格参照模板示例填写</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-alert v-if="null != importDescription"
                    :title="importDescription.title"
                    :type="importDescription.type" close-text="知道了"
                    :description="importDescription.description"
                    show-icon @close="importDescription.closeFunc">
                </el-alert>
                <!-- <ul class="upload-list">
                    <li v-for="(item, index) in fileList" :key="index">
                        <a :href="item.url" target="_blank">{{item.name}}</a>
                    </li>
                </ul> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleConfirm">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <div class="pagination">
            <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,50,100]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
        
    </div>
</template>
<script>
    let CONSTANT = require("../../constant/constant.js");
    let common = require("../../common.js");
    export default{
        data(){
            return {
                pageCount:null,
                pageIndex:1,
                pageSize:10,
                informList:[],
                allThemeList:[],
                importTemplateUrl:'',
                importDescription:null,
                themeList:[],
                loading: true,
                staffName:'',
                multipleSelection:[],
                url:'',
                sessionId:'',
                dialogVisible:false,
                fileList:[],
                upLoadUrl:'',
                importUrl:''
            }
        },
        mounted() {
            this.sessionId = sessionStorage.getItem('sessionId');
            this.url = CONSTANT.URL.STAFF.EXCEL;
            this.importUrl = CONSTANT.URL.STAFF.IMPORT+'?sessionId='+this.sessionId ;
            this.getinformList();   //分页获取资讯列表
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handExceed(files, fileList){
                 console.log(files,'files')
                var temp = {};
                temp.title = '选择文件错误';
                temp.type = 'warning';
                temp.description = '请先清除已选择的文件再选择新文件！';
                temp.closeFunc = () => {this.importDescription=null;}
                this.importDescription = temp;
            },
            handUploadSuccess(response, file, fileList){
                console.log(response,'AAA')
                var temp = {};
                if(response.status == 1) {
                    temp.title = '导入成功';
                    temp.type = 'success';
                    temp.description = '导入成功，关闭后自动刷新';
                    console.log('success')
                    temp.closeFunc = () => {this.importDescription=null;this.dialogFormVisible=false;this.getList();}
                } else {
                    temp.title = '导入失败';
                    temp.type = 'error';
                    temp.description = response.msg;
                    temp.closeFunc = () => {this.importDescription=null;}
                }
                this.importDescription = temp;
            },
            handleClose(){
                this.dialogVisible = false;
                this.importDescription=null;
                this.dialogFormVisible=false;
                this.$refs.upload.uploadFiles.pop();
            },
            // submitUpload() {
            //     let file = this.$refs.upload.uploadFiles[0];
            //     let suffix = file.name.toLowerCase().split('.').splice(-1)[0];
            //     let size = file.size;
            //     if('xls' != suffix && 'xlsx' != suffix) {
            //         this.$message.error('文件格式错误！请重新选择文件');
            //         return false;
            //     }
            //     if(size > 10 * 1024 * 1024) {
            //         this.$message.error('文件过大！请分割文件后多次导入');
            //         return false;
            //     }
            //     this.$refs.upload.submit();
            // },
            beforeUploadFile(file) {
                let url = CONSTANT.URL.STAFF.IMPORT;
                let splitArr = file.name.split("."),
                    len = splitArr.length;
                let param = {
                    suffix:file.name.split(".")[len - 1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(data)=> {
                        this.fileList.push({
                            name: file.name,
                            url: res.data.bussData.downloadUrl
                        })
                    })
                });
            },
            check:function(){
                this.$message({
                    type: 'warning',
                    message: '请先选择'
                });
            },
            handleConfirm() {
                this.dialogVisible = false
                this.fileList = []
            },
            selectTable(val) {
                this.ids = []
                this.multipleSelection = []
                val.map( item => {
                    this.ids.push(item.id)
                    this.multipleSelection.push(item.id)
                })
            },
            formatter(row, column, cellValue) {
                return cellValue ? cellValue : '- -'
            },
            handleSelectionChange(val) {
               console.log(val)
            },
            getinformList(){
                this.loading = true;
                let url = CONSTANT.URL.STAFF.FINDSTAFFBYPAGE;
                let data = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    staffName:this.staffName?this.staffName:null
                };
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    console.log(res)
                    this.loading = false;
                    let data = res.data.bussData;
                    this.informList = data;
                    this.pageCount = res.data.count
                }) 
            },

            //删除
            deleteItem(id){
                this.$confirm('确定删除?', '提示', {           
                    confirmButtonText: '确定',           
                    cancelButtonText: '取消',           
                    type: 'warning'         
                }).then(() => {           
                    let  url = CONSTANT.URL.STAFF.DELETE;
                    let data = {id:id} ;
                    common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type:'success',
                                message:'删除成功!'
                            });
                            this.getinformList();
                        }
                        else{
                            this.$message({
                                type:'warning',
                                message:res.msg
                            })
                        }
                    })      
                    }).catch(() => {           
                        this.$message({             
                        type: 'info',             
                        message: '已取消删除'           
                    });                   
                });
            },
            //新增编辑
            addCard(id){
                this.$router.push({path:'/staffEdit',query:{'id':id}});
            },
            addCard1(id){
                this.$router.push({path:'/staffDetail',query:{'id':id}});
            },
            handleSizeChange(val) {
                this.pageSize= val;
                this.getinformList();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getinformList();
            },
            handleSelectionChange(val) { 
            
            },
        },
    }
</script>

<style lang="scss">
.contain {
    .upload-export {
        padding-left: 10%;
        .upload-demo{
            padding-left: 20%;
        }
        .el-upload-list{
            display: none;
        }
        .upload-list {
            padding: 0;
            li {
                list-style: none;
                color: #606266;
                a {
                    color: #606266;
                }
            }
        }
    }
    .part-item{
        flex: 1;
        -webkit-flex: 1;
        text-align: center;
        &:last-child{
            border-right: 0!important;
        }
    }
  .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
  .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{ 
          width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
          li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
          li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
            .sort_name{ font-weight: 600;margin-bottom: 5px;}
            .group-list{ padding-left: 20px;
                .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
            }
        }
      }
      .el-button--default{background-color: #fff !important;}
  }
}
</style>